<template>
  <div>
    <p>模型隐藏或显示</p>
    <div class="three_box"></div>
  </div>
</template>
  
  <script setup>
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { nextTick } from "vue";
nextTick(() => {
  let XYZ = new THREE.AxesHelper(100);
  let scene = new THREE.Scene();
  scene.add(XYZ);
  let geometry = new THREE.BoxGeometry(50, 50, 50);
  let material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    transparent: true,
    opacity: 0.8,
  });
  let mesh1 = new THREE.Mesh(geometry, material);
  let mesh2 = new THREE.Mesh(geometry, material);
  mesh1.position.set(0, 0, 0);
  mesh2.position.set(50, 0, 0);
  //   mesh2.material.color.setHex(0xff0000)
  //   scene.add(mesh1);
  //   scene.add(mesh2);
  //   环境光
  let light = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(light);
  const Dom = document.querySelector(".three_box");
  const width = Dom.offsetWidth;
  const height = Dom.offsetHeight;
  let camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 30000);
  camera.position.set(200, 200, 200);
  camera.lookAt(0, 0, 0);
  const renderer = new THREE.WebGLRenderer({
    antialias: true, //是否执行抗锯齿，默认不抗false
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x444444);
  Dom.appendChild(renderer.domElement);
  //   像素比
  renderer.setPixelRatio(window.devicePixelRatio);
  // 控件
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", function () {
    renderer.render(scene, camera);
  });

  //   创建一个组对象
  const group = new THREE.Group();
  group.add(mesh1); //把网格模型1添加成为group的子对象
  group.add(mesh2); //把网格模型2添加成为group的子对象
  scene.add(group);
  //   mesh2.visible = false; //-----------------------------隐藏
  mesh2.material = mesh1.material.clone();//克隆新的材质--不影响原来的材质
  mesh2.material.visible = false; //------------------这个材质下的所有模型都隐藏
  group.translateY(50);
  group.translateX(-50);

  renderer.render(scene, camera);
  console.log(group.children, "组对象");
});
</script>
  
  <style  scoped>
.three_box {
  width: 70vw;
  height: 60vh;
}
</style>